<template>
  <div class="z-charts" ref="chart" :style="{ width, height }"></div>
</template>

<script>
import echarts from "@/plugins/echarts";

// eslint-disable-next-line no-unused-vars
const { throttle, debounce } = require("throttle-debounce");

export default {
  name: "ZChart",
  // 通用型封装
  props: {
    width: { type: String, default: "100%" },
    height: { type: String, default: "100%" },
    resizable: { type: Boolean, default: false },
  },

  data() {
    return {
      chart: null,
      resizeHandle: null,
    };
  },
  methods: {
    // 调用此方法 设置是否 显示 图形
    setOption(option) {
      this.chart.setOption(option);
    },
    // 调用此方法 获取当前绘制图像的选项信息
    getOption() {
      return this.chart.getOption();
    },
    // 调用此方法  如果父级元素宽高变化可以让我们的图像根据新的宽高 重新的绘制
    resize() {
      console.log("resize");
      return this.chart.resize();
    },
  },
  mounted() {
    // 初始化EChart 注册到DOM元素上
    this.chart = echarts.init(this.$refs.chart);

    // 监听视口的resize 如果视口大小发生改变  就执行 resize函数 重新绘制echarts
    // 箭头函数中的this指向 就指向当前的函数作用域中
    this.resizeHandle = throttle(400, true, () => this.resize());
    //this.resize.bind(this); 会重新生成一个函数
    // this.resizeHandle = () => this.resize.bind(this);
    // window.onresize=this.resizeHandle()  这种写法不可以用
    this.resizable && window.addEventListener("resize", this.resizeHandle);
  },
  //组件 重新激活
  activated() {
    this.resizable &&
      this.resizeHandle &&
      window.addEventListener("resize", this.resizeHandle);
  },
  //组件失活
  deactivated() {
    window.removeEventListener("resize", this.resizeHandle);
  },
  //组件销毁前
  destroyed() {
    window.removeEventListener("resize", this.resizeHandle);
  },
};
</script>

<style scoped></style>
